//webpack配置文件,其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
//由于webpack是基于node进行构建的，任何合法的node语法都是支持的
const path = require('path')
//html-webpack-plugin这个插件的两个作用
//1.自动在内存中根据指定页面生成一个内存页面
//2.自动把打包好的bundle.js文件，追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin-webpack4')
module.exports = {
    //手动指定入口和出口
    entry:path.join(__dirname,'./src/main.js'),
    output:{//输出文件的配置
        path: path.join(__dirname,'./dist'),//指定打包后的文件输出到哪个目录中去
        filename:'bundle.js'//指定输出的文件名称
    },
    // devServer:{//这是配置devserver的第二种方式
    //     //webpack-dev-server --open --port 3000 --contentBase src --hot
    //     open:true,
    //     port:3000,
    //     contentBase:'src',
    //     hot:true
    // },
    plugins:[//插件都写在plugins中
        new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定生成页面的模板
            filename:'index.html'//指定生成页面的路径
        }),
        new vueLoaderPlugin()
    ],
    module:{//用于配置所有的第三方模块加载器
        rules:[//test后跟的是一个正则表达式，代表以css结尾的文件，use后设置的是遇到这种文件如何处理
            { test:/\.css$/,use:['style-loader','css-loader']},//loader调用从右往左，右侧的处理完交由左侧继续处理
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置less文件处理loader
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置scss文件处理loader
            { test:/\.(jpg|png|gif|jpeg)$/,use:[{
                    loader: 'url-loader',
                    options:{
                        esModule:false,
                        name: '[name].[ext]',
                        limt:10240
                    }
                }]
                    
            },//处理图片路径的loader
            //limit给定的值，是图片的大小，单位是byte,如果我们引用的图片大于给定的值，不会被处理为base64格式
            //小图片处理为base64格式，便于加载
            //url-loader会给图片用hash值重命名，如果有loader需求可以自己指定name如何设置
            {test:/\.(ttf|eot|svg|woff|woff2|otf)$/,use:'url-loader'},//配置字体图标的处理loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置js处理loader,一定要排除node_modules,exclude后面跟的也是一个正则表达式，不能加引号
            //配置babel转换高级的es6语法
            {test:/\.vue$/,use:'vue-loader'}//vue文件处理loader
        ]
    },
    resolve:{
        alias:{//alias别名
           // "vue$":"vue/dist/vue.js"//修改Vue被导入时候的包的路径
        }
    }
}